<template>
    <div class="tabbar-wrapper">
        <!--选项卡滑动内容-->
        <slider class="slider" infinite=false :index="selectedIndex" auto-play=false @change="change($event)">
            <embed v-for="(item , i) in tabItems"
                   :src="item.src"
                   :key="i"
                   type="weex"
                   :style="{ visibility: item.visibility}"
                   class="scroller-tabbar-content"
            ></embed>
        </slider>

        <!--头部内容-->
        <scroller class="scroller-tabbar" scroll-direction="horizontal" show-scrollbar=false>
            <div class="tab-item-wrapper">
                <tab-item
                        v-for="item in tabItems"
                        :key="item.index"
                        :index="item.index"
                        :title="item.title"
                        :fontSize="fontSize"
                        :selected="item.selected"
                        :scroll="scroll"
                        @tabItemOnClick="tabItemOnClick"
                ></tab-item>
            </div>
        </scroller>
    </div>


</template>

<style scoped>
    .tabbar-wrapper {
        flex: 1;
        background-color: transparent;
    }
    .scroller-tabbar {
        position: absolute;
        left: 0;
        top: 0;
        width: 1080px;
        height: 120px;
    }
    .tab-item-wrapper {
        width: 1080px;
        height: 120px;
        padding-left: 43px;
        padding-right: 50px;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        background-color: #fff;
    }
    .slider,
    .scroller-tabbar-content {
        flex: 1;
        width: 1080px;
        background-color: transparent;
    }
</style>

<script>
    import tabItem from './tabbar-scroller-item';

    export default{
        props: {
            scroll: {
                type: Object,
                default: {}
            },
            tabItems: {
                type: Array,
                default: []
            },
            fontSize: {
                type: Number,
                default: 36
            },
            selectedIndex: { //当前选中的索引
                type: Number,
                default: 0
            }
        },
        data(){
            return {}
        },
        components: {
            'tab-item': tabItem
        },
        created() {
            this.$nextTick(()=>{
                this.select(this.selectedIndex);
            })
        },
        methods: {
            tabItemOnClick: function (e) {
                this.selectedIndex = e.index;
                this.select(e.index);
                this.$emit('tabItemOnClick', e);
            },
            select: function (index) {
                this.selectedIndex = index;
                for (var i = 0; i < this.tabItems.length; i++) {
                    var tabItem = this.tabItems[i];
                    if (i == index) {
                        tabItem.selected = true;
                        tabItem.visibility = 'visible';
                    }
                    else {
                        tabItem.selected = false;
                        tabItem.visibility = 'hidden';
                    }
                }
            },
            change(e) { //slider 在改变的时候
                this.selectedIndex = e.index;
                this.select(e.index);
            }
        },
        destroyed(){
            this.scroll = null;
            this.tabItems = null;
        }
    }
</script>
